<template>
	<div class="container">
    <header-compent activeName="allorder" :agent="agent" :usertype="usertype" :is_manager="is_manager"></header-compent>
    	<div class="page-header"><div  class="el-page-header"><div class="el-page-header__content">管理员查看全部订单管理</div></div></div>
    	
    	<div class="page-body">
        
        <div class="statusRowWhite flex flex-between">
                <div class="flex RowChild">
                    <el-input
                        v-model="query.keyword"
                        placeholder="请输入订单号"
                        size="mini"
                        style="width: 200px"
                        class="select"
                        clearable
                    ></el-input>

                 
                    <el-button type="primary" @click="fnGetOrderList()" size="mini" style="margin-left:10px;"
                        >查询</el-button
                    >
                    <el-button plain type="primary" @click="clearQuery" size="mini"
                        >刷新</el-button
                    >
                </div>
              
               
            </div>
 			 <el-table
			    :data="orderList"
			    stripe
			    style="width: 100%"
			    >
				 <el-table-column
			      prop="id"
			      label="订单ID"
			      >
			    </el-table-column>

          <el-table-column
			      prop="corpid"
			      label="企业id"
			      >
            <!-- <template slot-scope="scope">
              <ww-open-data type="departmentName" :openid="scope.row.corpid"  />
            </template> -->
			    </el-table-column>

          <el-table-column
			      prop="uid"
			      label="用户id"
			      >
			    </el-table-column>
          <el-table-column
			      prop="amount"
			      label="总金额"
			      >
			       <template slot-scope="scope">
			       	{{scope.row.amount/100}}
			       </template>
			    </el-table-column>
          <el-table-column
			      prop="active_code_cnt"
			      label="激活码数量"
			      >
			    </el-table-column>

          <el-table-column
			      prop="months"
			      label="购买月数"
			      >
			    </el-table-column>

      
          
			    <el-table-column
			      prop="create_time"
			      label="创建时间"
			      >
			    </el-table-column>
			  
			 
			     <el-table-column
			      prop="amount"
			      label="总金额"
			      >
			       <template slot-scope="scope">
			       	{{scope.row.amount/100}}
			       </template>
			    </el-table-column>
			    
			     <el-table-column
			      prop="trade_no"
			      label="订单号"
			      >
			    </el-table-column>
          
			    <!--状态：1待付款，2已付款，3付款失败，4已退款-->
			    <el-table-column
			      prop="status"
			      label="订单状态"
			     >
			      <template slot-scope="scope">
			       	<span v-if="scope.row.status==1">
				    	未付款
				    </span>
				    <span v-if="scope.row.status==2">
				    	已付款
				    </span>
				    <span v-if="scope.row.status==3">
				    	付款失败
				    </span>
				    <span v-if="scope.row.status==4">
				    	已退款
				    </span>
				
			      </template>
			    </el-table-column>
			    
			    
			
			    <el-table-column
			      prop="active_status"
			      label="激活状态"
			     >
			      <template slot-scope="scope">
			       	<span v-if="scope.row.active_status==0">无效</span>
				    <span v-if="scope.row.active_status==1">激活中，等待专员激活</span>
				    <span v-if="scope.row.active_status==2">已完成激活</span>
				  
			      </template>
			    </el-table-column>
		
				 <el-table-column
			      prop="active_status"
			      label="操作"
			     >
			      <template slot-scope="scope">
              
              <el-button size="mini" type="primary" class="ml10" @click="setSignOrder(scope.row.trade_no,scope.row.has_invoice,scope.$index)" v-if="scope.row.has_invoice==0">未开票</el-button>
				    <el-button size="mini" type="" class="ml10" @click="setSignOrder(scope.row.trade_no,scope.row.has_invoice,scope.$index)"  v-if="scope.row.has_invoice==1">已开票</el-button>
			      </template>
			    </el-table-column>
		
		
			  </el-table>
 			
 			 <div class="mt20 mb20">
				    <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="query.page"
				      :page-sizes="[10, 20, 30, 50]"
				      :page-size="query.limit"
				      layout="total, sizes, prev, pager, next"
				      :total="total">
				    </el-pagination>
			 </div>
			  
    		
    	</div>


    </div>
</template>

<script>
import { postAllOrderList,postSignOrder} from "../api/index";	
import Cookies from "js-cookie";
import HeaderCompent from "./header.vue";


export default {
  name: 'index',
   components: {
	HeaderCompent
  },
  data () {
    return {
	    isSending:false,
	    orderList:[],
	   
	    query:{
	    	page:1,
	    	limit:10,
        keyword:'',
	    },
	    total:0,
	 

	 
	    agent:Cookies.get('agent') || '0',
	    usertype:Cookies.get('usertype') || '0',
	    orderUserList:[],
	    dialogOrderListVisible:false,
      is_manager: Cookies.get('is_manager') || 0,

	    
    }
  
  },
  methods:{
  	setSignOrder(trade_no,has_invoice,index){
  		if(this.isSending == true){
        console.log('请稍等');
        return false;
		  }
	   	var title;
      var tag;
	   	this.isSending = true;
      if(has_invoice==0){
        title='确认开票';
        tag=1;
      }
      else{
        title='取消开票';
        tag=0;
      }
       this.$confirm(title+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postSignOrder({trade_no:trade_no,tag:tag}).then((res) => {
            this.isSending = false;
            let { msg, code, data } = res.data;
            if(code == 200){
              if(has_invoice == 0 ){
                this.orderList[index].has_invoice =1;
              }
              if(has_invoice == 1 ){
                this.orderList[index].has_invoice =0;
              }
            }
            },reject=>{
              this.isSending = false;
              let { msg, code, data } = reject.data;
              if(code == 401){
                Cookies.remove('token');
                this.$router.push('/login')
              }
            });
        }).catch(() => {

          this.isSending = false;
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });

  	},
  	handleSizeChange(e){
  		this.query.limit = e;
  		this.fnGetOrderList();
  	},
  	handleCurrentChange(e){
  		this.query.page = e;
  		this.fnGetOrderList();
  		
  	},


  	//获取用户列表
   	fnGetOrderList(){
		if(this.isSending == true){
			console.log('请稍等');
			return false;
		}
	   	
	   	 this.isSending = true;
	   	 postAllOrderList(this.query
	     ).then((res) => {
	     
	      	this.isSending = false;
	        let { msg, code, data } = res.data;
	      	
			if(code == 200){
				this.orderList = data.list.data;
				this.total = data.list.total;
			}
	
	        
	        
	      },reject=>{
	      	 this.isSending = false;
	      	 let { msg, code, data } = reject.data;
	      	 if(code == 401){
	      	 	Cookies.remove('token');
	      	 	this.$router.push('/login')
	      	 }
	      	 
	      });
   	},
     clearQuery() {
            Object.assign(this.query, {
              page:1,
              limit:10,
              keyword:'',
            })
            this.fnGetOrderList()
        },
   	
  },
  created(){
  	 console.log(process.env.BASE_API)
  	 console.log(process.env.PAY_MONTH)
  	  this.token = Cookies.get('token');
  	  if(!this.token){
  	  	this.$router.push('/login');
  	  }
  	  else{
  	  	this.fnGetOrderList();

  	  }
	
  },
  mounted(){

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  type="text/scss" lang="scss" >

	.item{
		margin: 20px auto;
	}
	.qr-code {
	  text-align: center;
	  .subtitle {
	    padding: 15px 0 30px;
	  }
	  .tips {
	    padding-top: 25px;
	    img{
	    	margin-right: 10px;
	    }
	  }
	}
	
	.help_title {
	  text-align: left;
	  .subtitle {
	    padding: 10px;
	  }
	  .tips {
	    padding-top: 25px;
	    img{
	    	margin-right: 10px;
	    }
	  }
	}
</style>
